/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Tabs } from 'antd';
import FiltrateUpgrade from '../../../components/common/FiltrateUpgrade';
import Container from '../../../components/common/Container';
import BladHistoryEcharts from '../Echarts/BladHistoryEcharts';
import request from '../../../utils/request';
import moment from 'moment';
class BlabHistory extends Component {

    state = {
        disList:{}
    }

    componentDidMount () {
        this.onSubmit({
            endTime:null,
            startTime:null,
            gasStationName:"#1燃气站",
            type:1
        });
    }

    onSubmit = (val) => {
        console.log(val)
        if(val) {
            if(val.endTime !== null) {
                val.endTime = moment(val.endTime).format("YYYY-MM-DD hh:mm:ss")
            }
            if(val.startTime !== null) {
                val.startTime = moment(val.startTime).format("YYYY-MM-DD hh:mm:ss")
            }
        }
       
        request({
            url: `/zhrq-web/gas/gasMonitor/getRunTimeTu`,
            method: 'POST',
            data:val
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                this.setState({
                    disList:data.ret
                })
            }
        })

    }
    onSelectedChange = () => {
        
    }

    render() {
        const items = [
            {
                type: 'select',
                label: '站点选取',
                paramName: 'gasStationName',
                style: { width: 180 },
                options: [
                    { text: '#1燃气站', value: '#1燃气站' },
                    { text: '#2燃气站', value: '#2燃气站' },
                    { text: '#3燃气站', value: '#3燃气站' },
                    { text: '#4燃气站', value: '#4燃气站' },
                    { text: '#5燃气站', value: '#5燃气站' },
                    { text: '#6燃气站', value: '#6燃气站' },
                    { text: '#7燃气站', value: '#7燃气站' },
                    { text: '#8燃气站', value: '#8燃气站' },
                    { text: '#9燃气站', value: '#9燃气站' },
                ]
            },
            {
                type: 'select',
                label: '指标选取',
                paramName: 'type',
                style: { width: 180 },
                options: [
                    { text: '甲烷实时值', value: '1' },
                    { text: '甲烷小时均值', value: '2' },
                ]
            },


            {
                type: 'datePicker',
                label: '开始时间',
                paramName: 'startTime',
                placeholder: '请输入',
                width: 200
            },
            {
                type: 'datePicker',
                label: '结束时间',
                paramName: 'endTime',
                placeholder: '请输入',
                width: 200
            }

        ];

        const windowWidth = document.body.clientWidth;

        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        if (windowWidth > 1367) {
            containerHeight = '77vh';
        }


        return (
            <div>
                <FiltrateUpgrade
                    items={items}
                    style={{ width: windowWidth > 1900 ? '65%' : '65%' }}
                    ref={ref => { this.f1 = ref }}
                    submit={this.onSubmit}
                    selectedChange={this.onSelectedChange}
                // btnRight={true}
                // height={windowWidth > 1900 ? 136 : 126}
                />
                <Container
                    style={{ height: containerHeight }}
                    header={true}
                >
                <BladHistoryEcharts
                data={this.state.disList}
                />
                </Container>
            </div>
        )
    }
}
export default (BlabHistory);
